<template>
      <div>
              <el-dropdown trigger="hover" :show-timeout="0" class=" cP">
            <span>
            
              <el-icon  style="color: var(--navColorFont)"
                class="llt-icon-size  position-relative"><bell /></el-icon>
                <div class="llt-badge"></div>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-tabs
                  class="header-message-tabs p20"
                  v-model="activeName"
                  @tab-click="handleTagMessageClick"
                >
                  <el-tab-pane label="通知(1)" name="first">
                    <el-scrollbar height="200px">
                      <div class="item" v-for="item in 20" :key="item">
                        <div>你收到了{{ item + 1 }}的周报</div>
                        <div class="time">2020-1-1</div>
                      </div>
                    </el-scrollbar>
                  </el-tab-pane>
                  <el-tab-pane label="代办(1)" name="third">
                    <el-scrollbar height="200px">
                      <p class="item" v-for="item in 20" :key="item">{{ item }}</p>
                    </el-scrollbar>
                  </el-tab-pane>
                </el-tabs>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
      </div>
</template>

<script setup lang="ts">
import {ref,reactive,getCurrentInstance } from 'vue';
    const internalInstance = getCurrentInstance();//获取当前实例
    const route = internalInstance?.appContext.config.globalProperties.$route;
import SearchDocument from "/@/components/search/search.vue";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
//消息 tabs start
let activeName = ref("first");
const handleTagMessageClick = (e: any) => {
  activeName.value = e.paneName;
};
defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
  
});

</script>

<style  scoped lang="scss" >
.menu-logo-box {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  height: 54px;
  background-color: #001529;

  img {
    width: 45px;
  }
  div {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    margin-left: 15px;
  }
}
</style>
